<template>
  <div id="up">
    <h2>发泡蜡</h2>
    <div class="app-container1" style="margin-top: -50px">
      <h1>关键数据</h1>
      <el-table
        vv-loading="loading"
        :data="tableData"
        border
        :cell-style="color1"
        :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
      >
        <el-table-column
          label="保温水温(℃)"
          align="center"
          prop="warmWaterTemp"
        />
        <el-table-column
          label="注蜡管道温度(℃)"
          align="center"
          prop="waxInTemp"
        /><el-table-column
          label="冷却水[入]管道温度(℃)"
          align="center"
          prop="inColdTemp"
        />
        <el-table-column
          label="冷却水[出]管道温度(℃)"
          align="center"
          prop="outColdTemp"
        />
        <el-table-column
          label="输入气压(kpa)"
          align="center"
          prop="inputPressure"
        />
        <!-- <el-table-column
          label="冷却仓转速(m/s)"
          align="center"
          prop="coolDownwaterTemp"
        />
        <el-table-column
          label="混合仓转速(m/s)"
          align="center"
          prop="mixSpeed"
        /> -->
        <el-table-column label="当前电流(A)" align="center" prop="i" />
        <el-table-column label="当前电压(V)" align="center" prop="v" />
        <el-table-column
          label="当前功耗(W)"
          align="center"
          prop="consumptionNow"
        />
        <el-table-column
          label="总能耗(KWH)"
          align="center"
          prop="consumptionAll"
        />
        <el-table-column label="运行状态" align="center" prop="state" />
      </el-table>
    </div>
    <el-date-picker
      clearable
      v-model="fplTime"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="请选择测试时间"
      style="margin-left: 30px"
    >
    </el-date-picker>
    <el-button
      type="primary"
      icon="el-icon-search"
      size="mini"
      @click="handleQuery"
      style="margin-left: 20px"
      >搜索
    </el-button>
    <div class="proCharts" ref="echart" style="height: 300px"></div>
    <div class="proCharts" ref="echarts" style="height: 300px"></div>
    <div class="proCharts" ref="echar" style="height: 300px"></div>
    <div class="proCharts" ref="airPressure" style="height: 300px"></div>
    <div class="proCharts" ref="fplInWax" style="height: 300px"></div>
    <div class="proCharts" ref="fplInCold" style="height: 300px"></div>
    <div class="proCharts" ref="fplOutCold" style="height: 300px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  fplLine,
  fplgetData,
  airPressure,
  fplInWax,
  fplInCold,
  fplOutCold,
} from "@/api/system/zdsx.js";

export default {
  data() {
    return {
      airPressureList: [],
      loading: false,
      fplTime: "",
      tableData: [
        {
          warmWaterTemp: null,
          coolDownwaterTemp: null,
          coolDownSpeed: null,
          mixSpeed: null,
          inputPressure: null,
          i: null,
          v: null,
          consumptionNow: null,
          consumptionAll: null,
          state: null,
        },
      ],
    };
  },
  mounted() {
    // this.getOilList();
    this.getOil();
    this.getTypeList();
    // this.getOne();
    this.getairPressure();
    this.getfplInWax();
    this.getfplInCold();
    this.getfplOutCold();
  },
  methods: {
    color1({ row, column }) {
      if (column.label === "设备状态") {
        if (row.state === "功耗过高") {
          return "background-color:#ff6666;color:#fff";
        } else if (row.state === "保温水温度过高") {
          return "background-color:#ff6666;color:#fff";
        } else if (row.state === "保温水温度过低") {
          return "background-color:#87CEFA;color:#fff";
        } else if (row.state === "气压过高") {
          return "background-color:#ff6666;color:#fff";
        } else if (row.state === "气压过低") {
          return "background-color:#87CEFA;color:#fff";
        } else if (row.state === "注蜡管道温度过高") {
          return "background-color:#ff6666;color:#fff";
        } else if (row.state === "注蜡管道温度过低") {
          return "background-color:#87CEFA;color:#fff";
        } else if (row.state === "冷却水温度过高") {
          return "background-color:#ff6666;color:#fff";
        } else if (row.state === "冷却水温度过低") {
          return "background-color:#87CEFA;color:#fff";
        }
      } else if (column.label === "当前功耗(W)") {
        if (row.state === "功耗过高") {
          return "background-color:#ff6666;color:#fff";
        }
      } else if (column.label === "保温水温(℃)") {
        if (row.state === "保温水温度过高") {
          return "background-color:#ff6666;color:#fff";
        } else if (row.state === "保温水温度过低") {
          return "background-color:#87CEFA;color:#fff";
        }
      } else if (column.label === "注蜡管道温度(℃)") {
        if (row.state === "注蜡管道温度过高") {
          return "background-color:#ff6666;color:#fff";
        } else if (row.state === "注蜡管道温度过低") {
          return "background-color:#87CEFA;color:#fff";
        }
      } else if (column.label === "冷却水[入]管道温度(℃)") {
        if (row.state === "冷却水温度过高") {
          return "background-color:#ff6666;color:#fff";
        } else if (row.state === "冷却水温度过低") {
          return "background-color:#87CEFA;color:#fff";
        }
      } else if (column.label === "冷却水[出]管道温度(℃)") {
        if (row.state === "冷却水温度过高") {
          return "background-color:#ff6666;color:#fff";
        } else if (row.state === "冷却水温度过低") {
          return "background-color:#87CEFA;color:#fff";
        }
      } else if (column.label === "输入气压(kpa)") {
        if (row.state === "气压过高") {
          return "background-color:#ff6666;color:#fff";
        } else if (row.state === "气压过低") {
          return "background-color:#87CEFA;color:#fff";
        }
      }
    },
    getTypeList() {
      this.loading = true;
      fplgetData().then((response) => {
        this.tableData = response.data;
        this.loading = false;
      });
      console.log(this.queryParams);
    },
    getOil() {
      this.loading = true;
      fplLine(this.fplTime).then((res) => {
        const option = {
          xAxis: {
            data: res.data[0][1],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["大发泡电流(A)", "加热管电流(A)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "大发泡电流(A)",
              data: res.data[0][0],
              type: "line",
            },
            {
              name: "加热管电流(A)",
              data: res.data[1][0],
              type: "line",
            },
          ],
        };
        const E = echarts.init(this.$refs.echarts);
        E.setOption(option);
        const option2 = {
          xAxis: {
            data: res.data[0][1],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["大发泡电压(V)", "加热管电压(V)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "大发泡电压(V)",
              data: res.data[0][2],
              type: "line",
            },
            {
              name: "加热管电压(V)",
              data: res.data[1][2],
              type: "line",
            },
          ],
        };
        const E2 = echarts.init(this.$refs.echar);
        E2.setOption(option2);
        const option3 = {
          xAxis: {
            data: res.data[0][1],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["保温水温(℃)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "保温水温(℃)",
              data: res.data[2][0],
              type: "line",
            },
          ],
        };
        const E3 = echarts.init(this.$refs.echart);
        E3.setOption(option3);
      });
    },
    // getOne() {
    //   this.loading = true;
    //   fplLine(this.fplTime).then((res) => {
    //     const option = {
    //       xAxis: {
    //         data: res.data[0][1],
    //       },
    //       yAxis: {
    //         type: "value",
    //       },
    //       legend: {
    //         data: ["大发泡电压(V)", "加热管电压(V)"],
    //       },
    //       tooltip: {
    //         trigger: "axis",
    //         axisPointer: {
    //           type: "cross",
    //           label: {
    //             backgroundColor: "#6a7985",
    //           },
    //         },
    //       },
    //       series: [
    //         {
    //           name: "大发泡电压(V)",
    //           data: res.data[0][2],
    //           type: "line",
    //         },
    //         {
    //           name: "加热管电压(V)",
    //           data: res.data[1][2],
    //           type: "line",
    //         },
    //       ],
    //     };
    //     const E = echarts.init(this.$refs.echar);
    //     E.setOption(option);
    //   });
    // },
    // getOilList() {
    //   this.loading = true;
    //   fplLine(this.fplTime).then((res) => {
    //     const option = {
    //       xAxis: {
    //         data: res.data[0][1],
    //       },
    //       yAxis: {
    //         type: "value",
    //       },
    //       legend: {
    //         data: ["保温水温(℃)"],
    //       },
    //       tooltip: {
    //         trigger: "axis",
    //         axisPointer: {
    //           type: "cross",
    //           label: {
    //             backgroundColor: "#6a7985",
    //           },
    //         },
    //       },
    //       series: [
    //         {
    //           name: "保温水温(℃)",
    //           data: res.data[2][0],
    //           type: "line",
    //         },
    //       ],
    //     };
    //     const E = echarts.init(this.$refs.echart);
    //     E.setOption(option);
    //   });
    // },
    handleQuery() {
      // this.getOilList();
      this.getOil();
      this.getTypeList();
      // this.getOne();
      this.getairPressure();
      this.getfplInWax();
      this.getfplInCold();
      this.getfplOutCold();
    },
    getairPressure() {
      // const date = new Date();
      // let y = date.getFullYear();
      // let m = date.getMonth() + 1;
      // let d = date.getDate();
      // let today = y + "-" + m + "-" + d;
      this.loading = true;
      airPressure(this.fplTime).then((res) => {
        console.log("yyds", res.data);
        this.airPressureList = res.data;
        const e = echarts.init(this.$refs.airPressure);
        let option = {
          xAxis: {
            type: "category",
            name: "时间",
            data: this.airPressureList[1],
          },
          yAxis: {
            type: "value",
            name: "气压(Pa)",
          },
          series: [
            {
              type: "line",
              name: "气压(Pa)",
              data: this.airPressureList[0], //数据
              stack: "气压(Pa)",
              smooth: true, //平滑
              markPoint: {
                //最大最小值
                data: [
                  { type: "max", name: "最大值" },
                  { type: "min", name: "最小值" },
                ],
              },

              markLine: {
                // 平均线
                data: [{ type: "average", name: "Avg" }],
              },
            },
          ],
          legend: {
            data: ["气压(Pa)"],
          },

          tooltip: {
            //鼠标显示数据
            trigger: "axis",
          },
        };
        e.setOption(option);
      });
    },
    getfplInWax() {
      this.loading = true;

      fplInWax(this.fplTime).then((res) => {
        console.log(res.data);
        const e = echarts.init(this.$refs.fplInWax);
        const option = {
          xAxis: {
            type: "category",
            name: "时间",
            data: res.data[1],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              type: "line",
              name: "注蜡管道温度(℃)",
              data: res.data[0],
              stack: "注蜡管道温度(℃)",
              smooth: true, //平滑
              markPoint: {
                //最大最小值
                data: [
                  { type: "max", name: "最大值" },
                  { type: "min", name: "最小值" },
                ],
              },
              markLine: {
                // 平均线
                data: [{ type: "average", name: "Avg" }],
              },
            },
          ],
          legend: {
            data: ["注蜡管道温度(℃)"],
          },
          tooltip: {
            //鼠标显示数据
            trigger: "axis",
          },
        };
        e.setOption(option);
      });
    },
    getfplInCold() {
      this.loading = true;

      fplInCold(this.fplTime).then((res) => {
        console.log(res.data);
        const e = echarts.init(this.$refs.fplInCold);
        const option = {
          xAxis: {
            type: "category",
            name: "时间",
            data: res.data[1],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              type: "line",
              name: "冷却水[入]管道温度(℃)",
              data: res.data[0],
              stack: "冷却水[入]管道温度(℃)",
              smooth: true, //平滑
              markPoint: {
                //最大最小值
                data: [
                  { type: "max", name: "最大值" },
                  { type: "min", name: "最小值" },
                ],
              },
              markLine: {
                // 平均线
                data: [{ type: "average", name: "Avg" }],
              },
            },
          ],
          legend: {
            data: ["冷却水[入]管道温度(℃)"],
          },
          tooltip: {
            //鼠标显示数据
            trigger: "axis",
          },
        };
        e.setOption(option);
      });
    },
    getfplOutCold() {
      this.loading = true;

      fplOutCold(this.fplTime).then((res) => {
        console.log(res.data);
        const e = echarts.init(this.$refs.fplOutCold);
        const option = {
          xAxis: {
            type: "category",
            name: "时间",
            data: res.data[1],
          },
          yAxis: {
            type: "value",
            name: "冷却水[出]管道温度(℃)",
          },
          series: [
            {
              type: "line",
              name: "冷却水[出]管道温度(℃)",
              data: res.data[0],
              stack: "冷却水[出]管道温度(℃)",
              smooth: true, //平滑
              markPoint: {
                //最大最小值
                data: [
                  { type: "max", name: "最大值" },
                  { type: "min", name: "最小值" },
                ],
              },
              markLine: {
                // 平均线
                data: [{ type: "average", name: "Avg" }],
              },
            },
          ],
          legend: {
            data: ["冷却水[出]管道温度(℃)"],
          },
          tooltip: {
            //鼠标显示数据
            trigger: "axis",
          },
        };
        e.setOption(option);
      });
    },
  },
};
</script>

<style>
.proCharts {
  width: 100%;
  height: 600px;
  /* margin-top: -300px; */
}

h2 {
  font-size: 35px;
  text-align: center;
  color: #0072c6;
}
.app-container1 {
  margin-left: 30px;
  margin-right: 30px;
}
</style>
